<template>
  <div class="common-layout">
    <el-container>
      <!-- 头部· -->
      <el-header>
        <img class="logo" src="../../assets/Logo.png" alt="Logo" />
        <span class="App">APP Analysis</span>
        <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false">
          <el-menu-item index="1" style="font-size: 20px">首页</el-menu-item>
          <el-sub-menu index="2">
            <template #title>App下载</template>
            <el-menu-item index="2-1" @click="dialogFormVisible = true"
              >APK链接下载</el-menu-item
            >
            <el-menu-item index="2-2" @click="dialogFormVisible2 = true">网页二维码下载</el-menu-item>
            <el-menu-item index="2-3" @click="dialogFormVisible3 = true">网页按钮下载</el-menu-item>
          </el-sub-menu>

          <el-dialog v-model="dialogFormVisible" width="500">
            <template #header>
              <div class="dialogHeader">
                <SvgIcon
                  iconName="icon-APK"
                  style="margin-right: 5px"
                  color="white"
                ></SvgIcon>
                <span>下载APK</span>
              </div>
            </template>
            <el-form ref="formRef" :model="form">
              <el-form-item
                label="APK链接："
                :label-width="'100px'"
                prop="link"
              >
                <el-input
                  v-model="form.link"
                  placeholder="请输入链接"
                  type="textarea"
                />
              </el-form-item>
            </el-form>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button @click="resetForm(formRef)">重置</el-button>
                <el-button type="primary" @click="submitForm(formRef)">
                  确认
                </el-button>
              </div>
            </template>
          </el-dialog>

          <el-dialog v-model="dialogFormVisible2" width="500">
            <template #header>
              <div class="dialogHeader">
                <SvgIcon
                  iconName="icon-APK"
                  style="margin-right: 5px"
                  color="white"
                ></SvgIcon>
                <span>下载APK</span>
              </div>
            </template>
            <el-form ref="formRef2" :model="form">
              <el-form-item
                label="APK二维码："
                :label-width="'110px'"
                prop="link"
              >
                <el-input
                  v-model="form.link"
                  placeholder="请输入链接"
                  type="textarea"
                />
              </el-form-item>
            </el-form>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false">取消</el-button>
                <el-button @click="resetForm(formRef2)">重置</el-button>
                <el-button type="primary" @click="submitForm2(formRef2)">
                  确认
                </el-button>
              </div>
            </template>
          </el-dialog>

          <el-dialog v-model="dialogFormVisible3" width="500">
            <template #header>
              <div class="dialogHeader">
                <SvgIcon
                  iconName="icon-APK"
                  style="margin-right: 5px"
                  color="white"
                ></SvgIcon>
                <span>下载APK</span>
              </div>
            </template>
            <el-form ref="formRef3" :model="form">
              <el-form-item
                label="APK网页："
                :label-width="'100px'"
                prop="link"
              >
                <el-input
                  v-model="form.link"
                  placeholder="请输入链接"
                  type="textarea"
                />
              </el-form-item>
            </el-form>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialogFormVisible3 = false">取消</el-button>
                <el-button @click="resetForm(formRef3)">重置</el-button>
                <el-button type="primary" @click="submitForm3(formRef3)">
                  确认
                </el-button>
              </div>
            </template>
          </el-dialog>

        </el-menu>
      </el-header>
      <!-- 下部 -->
      <el-main>
        <div class="topImg">
          <!-- <div class="topContent">在数据洪流日益汹涌的今天</div>
          <div class="topContent2">每一个决策都关乎成败</div> -->
          <div class="accent">APP智能识别分析系统</div>
          <div class="title">快速分析，性能出色，操作简单的app分析系统</div>
          <div class="btn">
            <button @click="scrollToTop">
              快速开始<el-icon><Bottom /></el-icon>
            </button>
          </div>
        </div>
        <div class="advan">
          <el-card style="width: 250px; height: 150px">
            <SvgIcon
              iconName="icon-baolipojie"
              style="margin-right: 5px"
              color="white"
            ></SvgIcon>
            <span style="margin-top: 10px; font-size: 15px"
              >高效的破解算法</span
            >
            <span style="margin-top: 5px; color: gray; font-size: 12px"
              >确保破解的兼容性和稳定性</span
            >
          </el-card>
          <el-card style="width: 250px; height: 150px">
            <SvgIcon
              iconName="icon-gongju-"
              style="margin-right: 5px"
              color="white"
            ></SvgIcon>
            <span style="margin-top: 10px; font-size: 15px"
              >丰富的功能集合</span
            >
            <span style="margin-top: 5px; color: gray; font-size: 12px"
              >满足用户在不同场景下的需求</span
            >
          </el-card>
          <el-card style="width: 250px; height: 150px">
            <SvgIcon
              iconName="icon-anquan1"
              style="margin-right: 5px"
              color="white"
            ></SvgIcon>
            <span style="margin-top: 10px; font-size: 15px"
              >完善的防护机制</span
            >
            <span style="margin-top: 5px; color: gray; font-size: 12px"
              >内置多重安全防护机制</span
            >
          </el-card>
          <el-card style="width: 250px; height: 150px">
            <SvgIcon
              iconName="icon-a-lianhe79"
              style="margin-right: 5px"
              color="white"
            ></SvgIcon>
            <span style="margin-top: 10px; font-size: 15px"
              >完善的自动化机制</span
            >
            <span style="margin-top: 5px; color: gray; font-size: 12px"
              >普通民众也能轻松分析违法APK</span
            >
          </el-card>
        </div>
        <div class="upTitle">请选择文件进行上传分析</div>
        <div class="start">
          <el-upload
            class="upload-demo"
            drag
            :http-request="uploadFile"
            :before-upload="beforeUpload"
            :on-progress="handleUploadProgress"
            multiple
          >
            <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
            <div class="el-upload__text">拖拽上传或 <em>点击上传</em></div>
          </el-upload>
          <div class="demo-progress">
            <el-progress
              v-if="uploading"
              :percentage="percentage"
              :stroke-width="15"
              striped
            />
          </div>
        </div>
        <div v-if="show">
          <el-table border :data="uploadedFiles">
            <el-table-column prop="filename" label="文件名"></el-table-column>
            <el-table-column prop="filepath" label="文件路径"></el-table-column>
            <el-table-column label="选中">
              <template #default="scope">
                <el-radio v-model="selectedFile" :label="scope.row.filepath"
                  >Select</el-radio
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="ana-btn">
            <el-button
              type="primary"
              @click="filter"
              :disabled="!selectedFile || analyzing"
              >分析</el-button
            >
            <el-dialog v-model="visible" :show-close="false" width="600">
              <template #header="{ close, titleId, titleClass }">
                <div class="my-header">
                  <h4 :id="titleId" :class="titleClass">黑白名单过滤</h4>
                  <el-button type="danger" @click="close">
                    <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
                    close
                  </el-button>
                </div>
              </template>
              <div class="filter" v-if="!filterRe.match">不在黑白名单中</div>
              <div class="inFilter" v-else>
                <span>apk文件名：{{filterRe.details['apk文件名']}}</span>
                <span>app名：{{filterRe.details['app名']}}</span>
                <span>MD5：{{filterRe.details['MD5']}}</span>
                <span v-if="filterRe.details['判别类型']===0">判别类型：黑灰产</span>
                <span v-else-if="filterRe.details['判别类型']===1">判别类型：涉赌</span>
                <span v-else-if="filterRe.details['判别类型']===2">判别类型：涉诈</span>
                <span v-else-if="filterRe.details['判别类型']===3">判别类型：涉黄</span>
                <span v-else-if="filterRe.details['判别类型']===4">判别类型：正常</span>
              </div>
              <template #footer>
                <div class="dialog-footer">
                  <el-button @click="visible = false">取消</el-button>
                  <el-button type="primary" @click="analyzeFile">
                    继续分析
                  </el-button>
                </div>
              </template>
            </el-dialog>
          </div>
        </div>

        <div class="mycard">
          <div class="des">
            <span class="about">关于我们</span>
            <div class="detail">
              <span>随着社会治安的逐步改善，网络空间的复杂性却日益凸显。</span>

              <span
                >尤其是网上的诈骗和赌博活动借助手机APP这一载体，变得更加隐蔽且多样化。</span
              >

              <span>严重侵害了公众的财产安全和社会的稳定秩序。</span>

              <span
                >普通民众难以自行分析其中的违法线索，这使得打击网络犯罪变得更加困难。</span
              >

              <span>自动化APK违法线索分析平台应运而生。</span>
            </div>
          </div>
          <img
            src="../../assets/xiTong.png"
            alt="系统"
            width="200px"
            height="200px"
          />
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script setup>
import { UploadFilled, Bottom,CircleCloseFilled } from "@element-plus/icons-vue";
import { ref } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
import {apkLinkAPI,qrcodeAPI,buttonAPI,filterAPI} from "@/apis/anay.js"

const percentage = ref(0);
const uploading = ref(false);
const analyzing = ref(false);
const uploadedFiles = ref([]);
const selectedFile = ref(null);
const router = useRouter();
const show = ref(false);
const dialogFormVisible = ref(false);
const dialogFormVisible2 = ref(false);
const dialogFormVisible3 = ref(false);
const formRef = ref();
const formRef2 = ref();
const formRef3 = ref();
const visible = ref(false)
const filterRe = ref({})

const filter =async ()=>{
  const response = await filterAPI(selectedFile.value)
  // console.log(response)
  filterRe.value = response.data
  // console.log(filterRe)
  // console.log(filterRe.value.details['MD5'])
  visible.value = true
}

const form = ref({
  link: "",
});

const submit= async (formEl)=>{
  if (!formEl) return;
  const response = await apkLinkAPI(form.value.link)
  uploadedFiles.value.push({
      filename: response.data.filename,
      filepath: response.data.filepath,
    });
  show.value = true;
}

const submit2 = async (formEl)=>{
  if (!formEl) return;
  const response = await qrcodeAPI(form.value.link)
  // console.log(response)
  uploadedFiles.value.push({
      filename: response.data.filename,
      filepath: response.data.filepath,
    });
  show.value = true;
}

const submit3 = async (formEl)=>{
  if (!formEl) return;
  const response = await buttonAPI(form.value.link)
  // console.log(response)
  uploadedFiles.value.push({
      filename: response.data.filename,
      filepath: response.data.filepath,
    });
  show.value = true;
}
const submitForm =  (formEl) => {
  submit(formEl);
  dialogFormVisible.value = false
};

const submitForm2 =  (formEl) => {
  submit2(formEl);
  dialogFormVisible2.value = false
};

const submitForm3 =  (formEl) => {
  submit3(formEl);
  dialogFormVisible3.value = false
};

const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};

const scrollToTop = () => {
  window.scrollTo({
    top: 200,
    left: 0,
    behavior: "smooth",
  });
};

const handleUploadProgress = (event) => {
  if (event.lengthComputable) {
    percentage.value = Math.round((event.loaded * 100) / event.total);
  }
};

const uploadFile = (options) => {
  const { file, onSuccess, onError, onProgress } = options;
  uploading.value = true;
  const formData = new FormData();
  formData.append("file", file);

  axios
    .post("http://localhost:5000/upload", formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
      onUploadProgress: (progressEvent) => {
        handleUploadProgress(progressEvent);
        onProgress(progressEvent);
      },
    })
    .then((response) => {
      // console.log(response.data);
      uploadedFiles.value.push({
        filename: file.name,
        filepath: response.data.filepath,
      });
      onSuccess(response.data);
      uploading.value = false;
      show.value = true;
    })
    .catch((error) => {
      console.error(error);
      onError(error);
      uploading.value = false;
    });
};

const beforeUpload = (file) => {
  return true;
};

const analyzeFile = () => {
  analyzing.value = true;
  visible.value = false
  router.push({ name: "analysis", query: { filepath: selectedFile.value } });
};
</script>

<style scoped lang="less">
.inFilter{
  font-size: 20px;
  display: flex;
  flex-direction: column;
}
.filter{
  font-size: 20px;
}
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
.mycard {
  position: relative;
  img {
    position: absolute;
    bottom: 0;
    right: 15%;
  }
}
.el-dialog__header {
  span {
    font-size: 18px;
    font-weight: bold;
  }
}
.dialogHeader {
  display: flex;
  align-items: center;
}
::v-deep .el-form-item__label {
  font-size: 16px;
}
.demo-progress {
  width: 520px;
}
.App {
  position: absolute;
  top: 5px;
  left: 53px;
  z-index: 999;
  height: 60px;
  line-height: 60px;
  color: #5ca0c4;
  font-weight: bold;
  font-size: 22px;
}
.logo {
  height: 50px;
  width: 50px;
  position: absolute;
  top: 5px;
  left: 0;
  z-index: 999;
}
.des {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.des div {
  color: #999;
  font-size: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.des div span {
  margin-top: 5px;
}
.about {
  display: block;
  color: #232f55;
  font-size: 20px;
  font-weight: bold;
}
.mycard {
  width: 100%;
  background-color: #f5f9fc;
  margin-top: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  .svg {
    display: flex;
    justify-content: center;
  }
  .des {
    margin-top: 20px;
    .about {
      margin-bottom: 10px;
    }
    .detail {
      margin-bottom: 20px;
    }
  }
}
.start {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 30px;
  flex-direction: column;
}
::v-deep .el-card__body {
  padding-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.svg-icon {
  width: 40px;
  height: 40px;
}
.el-card {
  display: flex;
  justify-content: center;
}
.advan {
  display: flex;
  justify-content: space-around;
  margin-top: 15px;
}
.topContent {
  position: absolute;
  right: 255px;
  top: 80px;
  font-size: 29px;
  color: white;
}
.topContent2 {
  position: absolute;
  right: 250px;
  top: 130px;
  font-size: 29px;
  color: white;
}
.el-main {
  padding: 0;
}
.topImg {
  width: 100%;
  height: 245px;
  .accent {
    background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 58px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 200px;
    font-weight: 900;
  }
  .title {
    display: inline-block;
    line-height: 40px;
    height: 40px;
    font-size: 20px;
    color: gray;
    margin-right: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .btn {
    margin-top: 40px;
    line-height: 40px;
    height: 40px;
    font-size: 20px;
    color: gray;
    margin-right: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    button {
      height: 45px;
      width: 120px;
      border-radius: 5px;
      background-color: #42d392;
      color: white;
      border: none;
      font-size: 16px;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
      .el-icon {
        font-size: 19px;
      }
    }
    button:hover {
      background-color: #65c99e;
    }
  }
}
.upTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: gray;
  margin-top: 50px;
  margin-bottom: 20px;
}
::v-deep .el-upload-list {
  display: none;
}
.el-icon--upload {
  color: #0488dc;
}
::v-deep .el-sub-menu__title {
  font-size: 20px;
}
.ana-btn {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.el-button {
  width: 90px;
  height: 40px;
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
}
.el-table {
  width: 100%;
  margin-top: 30px;
  --el-table-border-color: #d9dde7;
}

.el-icon--upload {
  margin-top: 85px;
}
::v-deep .el-upload-dragger {
  width: 520px;
  height: 400px;
  border: 5px dashed var(--el-border-color);
}
.el-upload-dragger .el-upload__text {
  font-size: 18px;
}

.el-header {
  padding: 0;
  justify-content: center;
  width: 100%;
  position: fixed;
  z-index: 999;
}

.el-menu--horizontal {
  justify-content: flex-end;
}
.el-sub-menu__title {
  font-size: 20px;
}
.el-menu-item {
  justify-content: center;
}
.uploadContent {
  margin-bottom: 30px;
}
</style>
